<template>
    <el-dialog v-model="show" title="设计师分单" align-center width="20%" @close="handleClose">
        <el-row :gutter="20" class="mb8">
            <el-col :span="11">
                制单员：{{ props.initList.creator || '' }}
            </el-col>
            <el-col :span="13">
                产品名称：{{ props.initList.customerName || '' }} <span v-if="props.initList.personCount">({{
                    props.initList.personCount
                    }})</span>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb20">
            <el-col :span="11">
                制单日期：{{ props.initList.createTime || '' }}
            </el-col>
            <el-col :span="13">
                产品名称：{{ props.initList.customerName || '' }}
            </el-col>
        </el-row>
        <el-form :model="form" ref="formRef" label-width="auto" label-position="top">
            <el-form-item label="选择分配设计师" prop="userId" :rules="[
                { required: true, message: '请选择分配设计师' },
            ]">
                <el-select v-model="form.userId" clearable placeholder="请选择分配设计师">
                    <el-option v-for="user in roleKeyUserList" :key="user.userId" :label="user.userName"
                        :value="user.userId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit(formRef)">分 配</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance } from 'element-plus';
import { getCustomerApi } from '@/api/sj/customer-crm';
import useCRMStore from '@/store/modules/crm';
import { designerDistributionApi } from '@/api/sj/productManagement/designerTakesOrders';
import user from '@/api/system/user';

const { getUserListByRoleKey } = useCRMStore();
const { roleKeyUserList } = toRefs(useCRMStore());

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const show = ref(false);
const formRef = ref<FormInstance>();
const form = ref<any>({ userId: '' });
const customerList = ref<any[]>([]);
const bomList = ref<any[]>([]);
const bomListLoading = ref(false);
const selectedBom = ref<any>({});

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
        getUserListByRoleKey('Designer');
    };
}, { deep: true });

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            const query = {
                id: props.initList.id,
                userId: form.value.userId,
                userName: await getUserName(form.value.userId)
            }
            try {
                const { code } = await designerDistributionApi(query);
                if (code == 200) {
                    emits('submit', true);
                    proxy?.$modal.msgSuccess('分单成功');
                    handleClose();
                } else {
                    emits('submit', false);
                };
            } catch (error) {

            }
        } else {
            console.log('error submit!')
        }
    })
};

/** 根据 id 获取 姓名 */
const getUserName = async (id: string) => {
    const userName = roleKeyUserList.value.filter(item => item.userId == id)[0].userName
    return userName;
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
.el-select {
    width: 100%;
}
</style>